<template>
    <div class="item">
        <PageHeader
            v-if="itemData"
            :title="itemInfo.title"
            :needLeft="true"
            :needRight="false"
        />
        <div class="item-header">
            <ul class="item-header-ul">
                <li
                    class="item-header-li"
                    v-for="(item, i) in navTitleList"
                    :key="i"
                    :class="navActiveIndex === i ? 'active' : ''"
                    @click="changeNavActiveIndex(i)"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
        <div class="item-container" v-if="itemData" @scroll="pageScroll" ref="pageEle">
            <div class="banner-box item-container-card" ref="bannerEle">
                <van-swipe class="my-swipe" indicator-color="white">
                    <van-swipe-item
                        v-for="(item, i) in bannerList"
                        :key="i"
                    >
                        <img :src="item" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="title-box item-container-card">
                <div class="line1">
                    <div class="price-box">
                        <div class="price">
                            <strong>¥{{ itemInfo.current_price | toFixed2 }}</strong>
                            <span>¥{{ itemInfo.price | toFixed2 }}</span>
                        </div>
                        <p>满99元包邮</p>
                    </div>
                    <div class="title-box">
                        <h3>{{ itemInfo.title }}</h3>
                        <p>{{ itemInfo.sub_title }}</p>
                    </div>
                </div>
                <div class="line2">
                    <div class="active-box" v-if="promotionsList.length !== 0">
                        <div class="active-title">优惠信息</div>
                        <div
                            class="active-content"
                            v-for="(item, i) in promotionsList"
                            :key="i"
                        >
                            <em>{{ item.tag }}</em>
                            <span>{{ item.title }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="type-box item-container-card" @click="showChoiceBox">
                <div class="title-box">
                    <h3>已选版本</h3>
                </div>
                <div class="content-box">
                    <div class="content-left">
                        <p
                            class="type-msg"
                            v-for="(item, i) in itemData.attr_info"
                            :key="i"
                        >
                            {{ item.spec_name }}：{{ item.value }}
                        </p>
                        <p class="count-msg">数量：{{ itemInfo.count }}</p>
                    </div>
                    <div class="content-right">
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <div class="service-box item-container-card">
                <div class="title-box">
                    <h2>服务说明</h2>
                </div>
                <div class="content-box">
                    <p class="msg1"><i :style="`background-image: url(${serviceBgImg})`"></i>7天无理由退货</p>
                    <p class="msg2"><i :style="`background-image: url(${serviceBgImg})`"></i>15天质量问题换货</p>
                </div>
                <div class="notice-box" v-if="itemData.shop_info.buy_notes.length">
                    <li
                        v-for="(item, i) in itemData.shop_info.buy_notes"
                        :key="i"
                    >
                        {{ item }}
                    </li>
                </div>
            </div>
            <div class="commont-box item-container-card" ref="commontEle">
                <div class="title-box">
                    <h2>用户评价</h2>
                </div>
                <div class="content-box">
                    <p>暂无评价，欢迎您购买之后留下宝贵的评价</p>
                </div>
            </div>
            <div class="detail-box item-container-card" ref="detailEle">
                <h2>商品详情</h2>
                <div class="img-box">
                    <img :src="itemData.shop_info.tpl_content.base.images.ali_mobile.url[0]" alt="">
                </div>
            </div>
            <div class="recommond-box" ref="recommendEle">
                <Recommend />
            </div>
            <div class="choice-box my-container">
                <van-popup
                    v-model="show"
                    position="bottom"
                    :style="{ height: '60%' }"
                    :get-container="getContainer"
                >
                    <div class="header-box">
                        <div class="image-box">
                            <img :src="itemInfo.image" alt="">
                        </div>
                        <div class="msg-box">
                            <div class="title">{{ itemInfo.title }}</div>
                            <div class="sub-title">
                                <span
                                    v-for="(item, i) in itemInfo.type"
                                    :key="i"
                                >
                                    {{ item.value }}
                                </span>
                            </div>
                            <div class="price">
                                <strong>{{ itemInfo.price | toFixed2 }}</strong>
                                <b>{{ itemInfo.price | toFixed2 }}</b>
                            </div>
                        </div>
                    </div>
                    <div class="content-box-wrap">
                        <div class="content-box">
                            <div
                                class="msg-box card"
                                v-for="(item, i) in itemData.shop_info.spec_v2"
                                :key="i"
                            >
                                <div class="title-box">
                                    <h4>{{ item.spec_name }}</h4>
                                </div>
                                <div class="content">
                                    <div
                                        v-for="(cell, j) in item.spec_values"
                                        :key="j"
                                        class="cell"
                                    >
                                        <div class="img-box" v-if="cell.image">
                                            <img :src="cell.image" alt="">
                                        </div>
                                        <p>{{ cell.show_name }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="count-box card">
                                <div class="title-box">
                                    <h4>选择数量</h4>
                                </div>
                                <div class="count">
                                    <van-stepper
                                        v-model="itemInfo.count"
                                        theme="round"
                                        button-size="22"
                                        disable-input
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </van-popup>
            </div>
            <div class="congratulation-box">
                <p v-if="congratulationShow">加入购物车成功</p>
            </div>
        </div>
        <div class="item-footer">
            <div class="service-box">
                <img :src="require('@/assets/img/item/customer-logo.png')" alt="" class="logo">
            </div>
            <div class="cart-box">
                <img :src="require('@/assets/img/item/cart-logo.png')" alt="" class="logo" @click="toCart">
                <i v-if="totalItemCount !== 0">{{ totalItemCount | over99 }}</i>
            </div>
            <div class="buy-now btn">现在购买</div>
            <div class="cart-now btn" @click="addItemToCart">加入购物车</div>
        </div>
    </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import Recommend from '@/components/Recommend'
import { createNamespacedHelpers } from 'vuex'
const cartStore = createNamespacedHelpers('cart')
export default {
    name: 'item',
    data () {
        return {
            navActiveIndex: 0,
            navTitleList: ['商品', '评价', '详情', '推荐'],
            itemData: null,
            bannerList: null,
            serviceBgImg: require('@/assets/img/item/service-logo.png'),
            itemInfo: {
                sku_id: null,
                title: null,
                sub_title: null,
                price: null,
                type: [],
                image: null,
                count: null,
                checked: true,
                current_price: null
            },
            show: false,
            congratulationShow: false,
            promotionsList: []
            // elePosition: {
            //     bannerY: null,
            //     commontY: null,
            //     detailY: null,
            //     recommendY: null
            // }
        }
    },
    computed: {
        ...cartStore.mapGetters(['totalItemCount']),
        bannerY () {
            return this.$refs.bannerEle.offsetTop
        },
        commontY () {
            return this.$refs.commontEle.offsetTop
        },
        detailY () {
            return this.$refs.detailEle.offsetTop
        },
        recommendY () {
            return this.$refs.recommendEle.offsetTop
        }
    },
    created () {
        // console.log(this.$route)
        // console.log(this.$route.query.id)
        this.$http.getItemData(this.$route.query.id)
            .then(resp => {
                // console.log(resp)
                this.itemData = resp.list[0]
                // console.log(this.itemData)
                this.bannerList = this.itemData.shop_info.ali_images
                this.itemInfo.sku_id = this.itemData.id
                this.itemInfo.title = this.itemData.shop_info.sku_mobile_title
                this.itemInfo.sub_title = this.itemData.shop_info.sku_mobile_sub_title
                this.itemInfo.price = this.itemData.price
                this.itemInfo.current_price = this.itemInfo.price
                for (var key in this.itemData.attr_info) {
                    this.itemInfo.type.push({
                        spec_info: this.itemData.attr_info[key].spec_name,
                        value: this.itemData.attr_info[key].value
                    })
                }
                this.itemInfo.image = this.itemData.shop_info.ali_image
                this.itemInfo.count = 1
                // console.log(this.itemInfo)
            })
            .then(() => {
                return this.$http.getPromotionsData()
            })
            .then(resp => {
                // console.log(resp)
                resp.list.forEach(item => {
                    if (item.tag === '直降' || item.tag === '促销' || item.tag === '秒杀') {
                        item.rule.result.discount_skus.forEach(cell => {
                            if (cell.sku_id === this.itemInfo.sku_id) {
                                this.promotionsList.push({
                                    sku_id: cell.sku_id,
                                    tag: item.tag,
                                    title: item.title,
                                    discount_price: cell.discount_price
                                })
                                if (this.itemInfo.current_price > cell.discount_price) {
                                    this.itemInfo.current_price = cell.discount_price
                                }
                            }
                        })
                    }
                    if (item.tag === '满减' || item.tag === '买赠') {
                        item.rule.condition.main_skus.forEach(cell => {
                            if (cell === this.itemInfo.sku_id) {
                                this.promotionsList.push({
                                    sku_id: cell,
                                    tag: item.tag,
                                    title: item.title
                                })
                            }
                        })
                    }
                })
                // console.log(this.promotionsList)
            })
    },
    methods: {
        ...cartStore.mapMutations(['addItem']),
        changeNavActiveIndex (i) {
            this.navActiveIndex = i
            // console.log(this.navActiveIndex)
            if (i === 0) {
                this.$refs.pageEle.scrollTop = this.bannerY
            } else if (i === 1) {
                this.$refs.pageEle.scrollTop = this.commontY
            } else if (i === 2) {
                this.$refs.pageEle.scrollTop = this.detailY
            } else if (i === 3) {
                this.$refs.pageEle.scrollTop = this.recommendY
            }
        },
        showChoiceBox () {
            this.show = true
        },
        getContainer () {
            return document.querySelector('.my-container')
        },
        toCart () {
            this.$router.push('/cart')
        },
        addItemToCart () {
            this.addItem(this.itemInfo)
            this.show = false
            this.congratulationShow = true
            setTimeout(() => {
                this.congratulationShow = false
            }, 2000)
        },
        pageScroll () {
            const scrollY = this.$refs.pageEle.scrollTop
            // console.log(scrollY)
            // console.log(this.elePosition.bannerY)
            // console.log(this.elePosition.commontY)
            // console.log(this.elePosition.detailY)
            // console.log(this.elePosition.recommendY)
            // this.navActiveIndex = 3
            if (scrollY >= this.bannerY && scrollY < this.commontY) {
                this.navActiveIndex = 0
            } else if (scrollY >= this.commontY && scrollY < this.detailY) {
                this.navActiveIndex = 1
            } else if (scrollY >= this.detailY && scrollY < this.recommendY) {
                this.navActiveIndex = 2
            } else if (scrollY >= this.recommendY) {
                this.navActiveIndex = 3
            }
        }
    },
    components: {
        PageHeader,
        Recommend
    }
}
</script>

<style lang="scss">
.item {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    .item-header {
        width: 100%;
        height: 50px;
        background-color: #efefef;
        border-bottom: 1px solid #cfcfcf;
        padding: 9px 6px;
        box-sizing: border-box;
        .item-header-ul {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            border: 1px solid #cbcbcb;
            border-radius: 5px;
            overflow: hidden;
            .item-header-li {
                &:last-child {
                    border-right: none;
                }
                &.active {
                    background-color: #9f9f9f;
                    color: #fff;
                }
                display: block;
                flex: 1;
                box-sizing: border-box;
                background-color: #efefef;
                box-sizing: border-box;
                border-right: 1px solid #cbcbcb;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 15px;
                color: #4d4d4d;
                font-weight: bold;
            }
        }
    }
    .item-container {
        width: 100%;
        flex: 1;
        background-color: #dddddd;
        overflow-x: hidden;
        position: relative;
        .item-container-card {
            margin-bottom: 6px;
            border-bottom: 1px solid #d1d1d1;
            background-color: #fff;
        }
        .banner-box {
            width: 100%;
            .van-swipe__indicator {
                background-color: #000;
            }
            .van-swipe__indicator--active {
                border: 1px solid #999;
            }
            img {
                width: 80%;
                display: block;
                margin: 0 auto;
            }
        }
        .title-box {
            .line1 {
                border-bottom: 1px solid #e6e6e6;
                .price-box {
                    padding: 22px 18px 0;
                    display: flex;
                    justify-content: space-between;
                    .price {
                        font-size: 12px;
                        font-weight: bold;
                        padding-bottom: 10px;
                        strong {
                            font-size: 18px;
                            color: #c73734;
                        }
                        span {
                            color: #999;
                            text-decoration: line-through;
                            margin-left: 5px;
                        }
                    }
                    p {
                        font-size: 14px;
                        color: #6c6c6c;
                    }
                }
                .title-box {
                    padding: 15px 18px 28px;
                    h3 {
                        font-size: 18px;
                        color: #262626;
                        font-weight: bold;
                    }
                    p {
                        font-size: 14px;
                        color: #6c6c6c;
                        margin-top: 12px;
                    }
                }
            }
            .line2 {
                .active-box {
                    padding: 18px 18px 10px;
                    .active-title {
                        font-size: 14px;
                        font-weight: bold;
                        color: #878787;
                    }
                    .active-content {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-top: 15px;
                        em {
                            display: block;
                            height: 20px;
                            padding: 0px 11px;
                            box-sizing: border-box;
                            background-color: #fbe4e2;
                            border: 1px solid #ebaaa8;
                            font-size: 12px;
                            color: #c63633;
                            font-weight: bold;
                            line-height: 20px;
                            border-radius: 10px;
                        }
                        span {
                            display: block;
                            font-size: 14px;
                            color: #000000;
                            font-weight: bold;
                            margin-left: 8px;
                        }
                    }
                }

            }
        }
        .type-box {
            .title-box {
                padding: 18px 18px 12px;
                h3 {
                    font-size: 14px;
                    font-weight: bold;
                    color: #878787;
                }
            }
            .content-box {
                padding: 18px;
                display: flex;
                justify-content: space-between;
                .content-left {
                    font-size: 15px;
                    color: #262626;
                    font-weight: bold;
                    .type-msg {
                        margin-top: 5px;
                    }
                    .count-msg {
                        margin-top: 5px;
                    }
                }
                .content-right {
                    font-weight: bold;
                    color: #878787;
                }
            }
        }
        .service-box {
            .title-box {
                padding: 10px 18px;
                border-bottom: 1px solid #eaeaea;
                h2 {
                    font-size: 16px;
                    color: #535353;
                    font-weight: bold;
                }
            }
            .content-box {
                padding: 18px 18px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 1px solid #eaeaea;
                p {
                    font-size: 12px;
                    color: #262626;
                    font-weight: bold;
                    display: flex;
                    align-items: center;
                    &.msg2 {
                        i {
                            background-position: -20px 0;
                            margin-left: 5px;
                        }
                    }
                    i {
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-size: auto 100%;
                    }
                }
            }
            .notice-box {
                padding: 18px;
                li {
                    list-style: disc;
                    font-size: 10px;
                    color: #6c6c6c;
                    margin-bottom: 5px;
                    line-height: 14px;
                }
            }
        }
        .commont-box {
            .title-box {
                padding: 10px 18px;
                border-bottom: 1px solid #eaeaea;
                h2 {
                    font-size: 16px;
                    color: #535353;
                    font-weight: bold;
                }
            }
            .content-box {
                padding: 18px;
                p {
                    font-size: 12px;
                    color: #878787;
                }
            }
        }
        .detail-box {
            h2 {
                font-size: 16px;
                color: #535353;
                font-weight: bold;
                padding: 10px 18px;
            }
            .img-box {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }
        .choice-box {
            display: flex;
            .van-popup--bottom {
                bottom: 50px;
            }
            .van-popup {
                overflow-y: inherit;
                display: flex;
                flex-direction: column;
            }
            .header-box {
                height: 118px;
                background-color: #f6f6f6;
                // background-color: turquoise;
                padding: 0 13px;
                position: relative;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #d3d3d3;
                .image-box {
                    width: 120px;
                    height: 120px;
                    position: relative;
                    left: 0px;
                    top: -20px;
                    border-radius: 5px;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
                .msg-box {
                    flex: 1;
                    padding-top: 15px;
                    padding-left: 15px;
                    .title {
                        font-size: 16px;
                        color: #262626;
                        font-weight: bold;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .sub-title {
                        font-size: 12px;
                        color: #6c6c6c;
                        margin-top: 10px;
                        span {
                            &::before {
                                content: "·";
                            }
                            &:first-child::before {
                                content: "";
                            }
                        }
                    }
                    .price {
                        margin-top: 20px;
                        font-size: 16px;
                        font-weight: bold;
                        strong {
                            color: #c73734;
                        }
                        b {
                            color: #999;
                            text-decoration: line-through;
                            margin-left: 10px;
                            font-size: 12px;
                        }
                    }
                }
            }
            .content-box-wrap {
                flex: 1;
                overflow-x: hidden;
                .content-box {
                    .card {
                        background-color: #fff;
                        border-bottom: 1px solid #ececec;
                        .title-box {
                            padding: 14px;
                            border-bottom: 1px solid #ececec;
                            h4 {
                                font-size: 16px;
                                color: #535353;
                                font-weight: bold;
                            }
                        }
                    }
                    .msg-box {
                        .content {
                            display: flex;
                            padding: 19px 14px 0;
                            flex-wrap: wrap;
                            .cell {
                                border: 1px solid #999;
                                border-radius: 5px;
                                padding: 5px 15px;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                margin-right: 15px;
                                margin-bottom: 15px;
                                .img-box {
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 50%;
                                    overflow: hidden;
                                    border: 1px solid #999;
                                    margin-bottom: 10px;
                                    img {
                                        width: 100%;
                                    }
                                }
                                p {
                                    font-size: 12px;
                                    color: #000;
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                    .count-box {
                        .count {
                            padding: 14px;
                            .van-stepper__input {
                                font-size: 16px;
                                color: #535353;
                                font-weight: bold;
                                width: 55px;
                            }
                            .van-stepper__minus,
                            .van-stepper__plus {
                                color: #818181;
                                background-color: #fdfdfd;
                                border: 1px solid #4c4c4d;
                                font-weight: bold;;
                            }
                        }
                    }
                }
            }
        }
        .congratulation-box {
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 80px;
            p {
                width: 150px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                font-size: 16px;
                color: #86572e;
                background-color: #fdf1d3;
                border: 1px solid #86572e;
                border-radius: 6px;
                margin: 0 auto;
            }
        }
    }
    .item-footer {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #cfcfcf;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3003;
        .logo {
            width: 41px;
        }
        .cart-box {
            margin-right: 10px;
            position: relative;
            i {
                display: block;
                position: absolute;
                top: -4px;
                right: 2px;
                width: 22px;
                height: 22px;
                background-color: #c63b39;
                border-radius: 50%;
                font-size: 10px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 22px;
            }
        }
        .service-box {
            margin-right: 10px;
        }
        .btn {
            height: 33px;
            width: 123px;
            font-size: 15px;
            line-height: 33px;
            text-align: center;
            border-radius: 5px;
            font-weight: bold;
            &.buy-now {
                background-color: #fff;
                border: 1px solid #e2e2e2;
                color: #525252;
                margin-right: 8px;
            }
            &.cart-now {
                background-color: #496ee6;
                border: 1px solid #3d61e2;
                color: #fff;
            }
        }
    }
}
</style>
